<template>
  <div class="Minemessage">
    <div class="publish-title">
      <div></div>
      <h5>发表留言</h5>
    </div>
    <div class="users">
      <van-cell-group>
        <van-field v-model="username" label="昵称(必填)" placeholder="优质的昵称→_→" />
      </van-cell-group>
      
    </div>
    <div class="publish">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="正义留言"
        type="textarea"
        maxlength="50"
        placeholder="欢迎留言，随缘回复，广告绕道!"
        show-word-limit
      />
    </div>
   <div class="btn-send">
       <van-button type="info">提交留言</van-button>
   </div>
   <!--展示评论内容-->
   <div class="publishAbout" v-for="(value,index) in 3" :key="index">
      <div class="publishData">
          <div class="userPhoto">
              <van-image
                width="50"
                height="50"
                lazy-load
                round
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
          </div>
          <div class="userMessage">
            <div class="users">
              <span>张三</span>
              <span>2020年12月22日</span>
            </div>
            <div class="content">哟吼,不错,带点那里的特产回来，哈哈哈!</div>
          </div>
      </div>
      <div class="lines"></div>
  </div>
  </div>
</template>

<script>
export default {
    name:"publishMessage",
    data(){
        return{
            message:"",
            username:""
        }
    }
}
</script>

<style>
.Minemessage{
  padding: 0 1rem;
}
.publish-title {
  display: flex;
  flex-direction: row;
}
.publish-title div{
  width: 3px;
  margin-right: 1rem;
 
  background-color: rgb(211, 66, 66);
}
.publish{
  margin-top: 2rem;
}
.publish .van-cell{
    border: 1px dashed green;
    margin-top: 1rem;
}
.publish .van-field__body{
    height: 6rem;
}
.publish .van-cell  .van-cell__value {
    height: 8rem;
    border: 1px dashed green;
}
.btn-send{
  margin-top: 2rem;
  display:flex;
  flex-direction: row-reverse;
}
.publishData {
  display: flex;
  flex-direction: row;
}
.publishAbout{
  padding: 1rem;
}
.publishAbout .lines{
   width: 100%;
   border-top: 1px dashed #666;
}
.userPhoto{
  margin-right: 1rem;
}
.userMessage .content{
  margin-top: 1rem;
  letter-spacing: 2px;
    width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;

}
.userMessage span{
  margin-right: 1rem;
  color:#666
}

</style>